<!-- 考勤-考勤管理-考勤管理-外勤规则 -->
<template>
  <div class="wrap">
    <a-collapse :bordered="false" style="margin-top: 10px">
      <a-collapse-item header="使用指南" key="1">
        <template #header>
          <span style="font-size: 24px">使用指南</span>
        </template>
        <a-list :bordered="false" :split="false" size="small">
          <a-list-item v-for="(item, index) in listArr" :key="index"
            >{{ item }}
          </a-list-item>
        </a-list>
      </a-collapse-item>
    </a-collapse>
    <div>
      <div class="header">
        <div>
          <a-input-search
            :style="{ width: '220px' }"
            placeholder="请输入名称"
            search-button
            @search="onSearch"
            @press-enter="onSearch"
            v-model="nameSearch"
          />
        </div>
        <div>
          <a-button type="primary" @click="add(null)" style="margin-right: 10px"
            >新增考勤外勤规则</a-button
          >
        </div>
      </div>
      <table-turn :table-data="getTableData" ref="tableRef">
        <a-table-column :width="80">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column :width="200" data-index="name" title="规则名称">
        </a-table-column>
        <a-table-column :width="200" data-index="definition" title="外出规则">
        </a-table-column>
        <a-table-column :width="200" data-index="definition" title="出差规则">
        </a-table-column>
        <a-table-column :width="200" data-index="" title="操作" fixed="right">
          <template #cell="{ record }">
            <a-tooltip content="编辑">
              <IconFont
                type="icon-edit"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer'
                }"
                @click="goEdit(record)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm
                content="是否确认删除该条数据?"
                position="left"
                @ok="del(record.id)"
              >
                <icon-font
                  type="icon-delete"
                  :size="26"
                  :style="{
                    cursor: 'pointer',
                    marginRight: '10px'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </template>
        </a-table-column>
      </table-turn>
    </div>
  </div>
</template>

<script lang="ts" setup>
const router = useRouter();
const listArr = [
  `1、外勤规则可控制员工申请外出、出差审批的时长单位（如按半天提交）、时长计算方式（如按自然日计算）。`,
  `2、若有多个不同规则，请新增方案。设置后，请到【考勤管理】→【考勤组管理】关联方案及人员`
];

let currData = ref(); // 储存当前选中数据
let tableRef = ref();
let nameSearch = ref(''); // 搜索框值

// 新增
const add = (record: any) => {
  router.push({
    name: 'AttendanceManagementOutsideRulesSetting'
  });
};

// 获取表格数据
const getTableData = async () => {
  try {
    // originData.value = await GetHumanChangeSetting({
    //   typeId: 1 // 人事异动默认传1
    // });
    // const res: any = originData.value.find(
    //   (item: any) => item.id === currId.value
    // );
    // res.content = res.personnelChange;
    // return Promise.resolve(res.personnelChange);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 搜索框搜索事件
const onSearch = () => {
  refresh();
};

// 编辑
const goEdit = (record: any) => {
  console.log(record);
  currData.value = record;
};

// 删除某一行
const del = async (id: number) => {
  try {
    // await DelHumanChangeSetting({ id });
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 弹窗自定义事件
const indexEmit = async (record: any) => {
  //
};

// 刷新表格数据
const refresh = () => {
  tableRef.value.loadData();
};
</script>

<style lang="less" scoped>
.wrap {
  padding: 10px 20px;

  .tag {
    height: 48px;
    color: #000;
    background-color: rgba(61, 126, 255, 1);
    width: 100%;
    font-size: 15px;
  }
  .header {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
  }
}

:deep(.arco-collapse-item-content) {
  background-color: #fff;
}
</style>
